import React from 'react'
import axios from 'axios'
import { useState } from 'react'
import PubSub from 'pubsub-js'

export default function Header() {
  const [search, setSearch] = useState('')

  const changeSearchHandle = (e) => {
    //获取表单的值  设置进去
    setSearch(e.target.value)
  }

  const searchHandle = async () => {
    //点击的时候发送axios请求  获取到搜索框的输入值 进行一个请求
    const result = await axios.get('https://api.github.com/search/users?q=' + search)
    //订阅
    PubSub.publish('github',result)
  }
  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" value={search} onChange={changeSearchHandle} placeholder="enter the name you search" />
        &nbsp;
        <button onClick={searchHandle}>Search</button>
      </div>
    </section>
  )
}
